<script setup lang='ts'>
import { ref } from 'vue'
import {UserFilled} from '@element-plus/icons-vue'

const movies = ref([
    {
        image: 'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
        title: '来自星星',
        description: '好看好看哈哈哈'

    },
    {
        image: 'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
        title: '来自星星',
        description: '好看好看哈哈哈'

    }
    ,
    {
        image: 'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
        title: '来自星星',
        description: '好看好看哈哈哈'

    }
    ,
    {
        image: 'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
        title: '来自星星',
        description: '好看好看哈哈哈'

    }
    ,
    {
        image: 'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
        title: '来自星星',
        description: '好看好看哈哈哈'

    }
    ,
    {
        image: 'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
        title: '来自星星',
        description: '好看好看哈哈哈'

    }
    ,
    {
        image: 'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
        title: '来自星星',
        description: '好看好看哈哈哈aaaahhhhhhhsssssss'

    }
    ,
    {
        image: 'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
        title: '来自星星',
        description: '好看好看哈哈哈'

    }
    ,
    {
        image: 'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
        title: '来自星星',
        description: '好看好看哈哈哈'

    }
    ,
    {
        image: 'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
        title: '来自星星',
        description: '好看好看哈哈哈'

    }

])
</script>


<template>
    <!--热门房间 -->
    <section class="HotRoom">
        <!--导航分类  -->
        <div>
            <el-row :gutter="20" class="headerall" style="height: 100px; align-items: center;" justify="space-between">
                <el-col :span="10">
                    <ul style="list-style-type: none;
                                       display: flex;
                                      justify-content: space-between;
                                             align-items: center;
                                         padding-left: 0;">
                        <li>
                            <el-button>全部</el-button>

                        </li>
                        <li>
                            <el-button>休闲</el-button>

                        </li>
                        <li>
                            <el-button>热门综艺</el-button>

                        </li>
                        <li>
                            <el-button>奇幻电影</el-button>

                        </li>
                        <li>
                            <el-button>轻松一刻</el-button>

                        </li>


                    </ul>
                </el-col>
                <el-col :span="2">
                    <el-button>换一换</el-button>
                </el-col>
            </el-row>
        </div>
        <!-- 全部房间 -->
        <div class="room-grid">
            <div v-for="(movie, index) in movies" :key="index" class="room-item">
                   <div  class="onphoto">
                    <el-icon><UserFilled /></el-icon>
                <span style="margin-left: 6px;">42</span>
                   </div>
                <el-image :src="movie.image" style="    width: 100%;border-radius: 20px;
    height: 190px;">
                </el-image>
                <div class="room-info">

                    <p style="overflow: hidden;">{{ movie.description }}</p>
                    <el-row style="align-items: center;" justify="start">
                        <el-col :span="3">

                            <el-avatar :size="32" src="/touxiang.jpg" />
                        </el-col>
                        <el-col :span="6">
                            <p>{{ movie.title }}</p>

                        </el-col>
                    </el-row>






                </div>

            </div>
        </div>

    </section>


</template>


<style lang='scss' scoped>
// 电影二行五列栅格布局
.room-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    // grid-template-rows: repeat(2, auto);
    grid-column-gap: 20px;
    grid-row-gap: 40px;
    margin-right: 10px;
}

.room-item {
    position: relative; 
    cursor: pointer;
    transition: background-color 0.3s ease;
    border-radius: 20px;

}

.room-item:hover {
    background-color: rgba(128, 119, 128, 0.333);

}

.room-info {

    position: relative; 
    padding: 10px;
}
.onphoto{
    
    font-family: PingFang SC, DFPKingGothicGB-Medium, sans-serif;
    font-size: 14px;
    font-weight: 800;
    line-height: 14px;
    position: absolute;
    bottom:47%;
    left:20px;
    z-index: 1;
    color: #fff;
    display: flex;

}
// 头部按钮
.headerall .el-button{
   
    border: 1px solid rgba( 255,255,255 , .04);
    
    background: rgba( 37,38,50 ,1);
    cursor: pointer;
    
    color: white;
    border-radius: 100px;
}
.headerall .el-button :hover{
   color:  #fe2c55;
}

</style>